import { FC } from 'react';
import { ProCard } from '@ant-design/pro-components';
import { EChartsOption } from 'echarts';
import KLines from '../k-line';
import { formatChineseAmount } from '@/pages/quotationCopy/utils';

const MobileStockItem: FC = ({ klines, code, name, monitoring, renderColor, market }: any) => {
  const option: EChartsOption = {
    grid: [
      {
        left: '8px',
        right: '4px',
        top: '2%',
        height: '70%',
      },
      {
        left: '40px',
        right: '10px',
        top: '80%',
        height: '20%',
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0, 1],
        start: 0,
        end: 100,
      },
    ],
    xAxis: [
      {
        type: 'category',

        boundaryGap: false,
        axisLine: { onZero: false },
        splitLine: { show: false },
        min: 'dataMin',
        max: 'dataMax',
        axisPointer: {
          z: 100,
        },
      },
      {
        type: 'category',
        gridIndex: 1,

        boundaryGap: false,
        axisLine: { onZero: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        min: 'dataMin',
        max: 'dataMax',
      },
    ],
    yAxis: [
      {
        scale: true,
        splitArea: {
          show: true,
        },
      },
      {
        scale: true,
        gridIndex: 1,
        splitNumber: 2,
        axisLabel: { show: false },
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
      },
    ],
    series: [
      {
        name: 'k线图',
        type: 'candlestick',
        colorBy: 'data',
      },
    ],
  };

  return (
    <ProCard key={code} className="mb-4 pr-4">
      <div className="text-base flex">
        <span className="text-base font-bold cursor-pointer">
          {name} {code}
        </span>
        <span className="ml-4">
          <span>换手率：</span>
          <span>{klines?.at(-1)?.turn}%</span>
        </span>
        <span className="ml-4">
          <span>流通市值：</span>
          <span>{formatChineseAmount(klines?.at(-1)?.cmv)}</span>
        </span>
      </div>
      <div className="my-4 flex items-center justify-end">
        <a
          href={`https://wap.eastmoney.com/h52n?type=502&market=${market?.toUpperCase()}&code=${code}`}
          target="_blank"
          rel="noreferrer"
        >
          买入
        </a>
      </div>
      <KLines klines={klines} renderColor={renderColor} echartOption={option} height="200px" />
    </ProCard>
  );
};

export default MobileStockItem;
